<template>
  <div class="app-container">
    <el-tree
      :data="list"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.id }} - {{ data.mobile }} - {{ data.nickname }} - {{ data.level0.display }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'MemberTeam',
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetchData() {
      api.member.getTeamTree({ id: this.$route.params.id }).then(response => {
        this.list = response.data
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
}
</style>
